<%@page import="org.proddevplm.dao.data.Product"%>
<%@page import="java.util.List"%>

<%
	List products = (List)session.getAttribute("products");
	Product p;
%>

<script>
	var flag = false;
	<%if(products.size()!=0)%> flag = true;
	$(document).ready(function(){
		if(flag){
			$("#allProducts")
				.tablesorter({
					widthFixed:true,
					debug:false,
					widgets:['zebra']
				})
				.tablesorterPager({container: $("#allProdPager")})
				.tablesorterFilter({filterContainer: "#allProdFilter-box",
					filterClearContainer: "#allProdFilter-clear-button",
		            filterCaseSensitive:false,
		            filterColumns: [1,2,3,4,5]
				});
		}
	}); 
	
</script>

<div style="font-family:verdana; font-size:medium; color:darkblue; text-align:center; margin-top:20px; margin-bottom:20px">Current products on this project</div>

<div align="center">
	<div style="width:auto">
		<div style="float:right; margin-bottom:-10px; text-align:right; ">
			Search table: <input name="filter" id="allProdFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
			<input id="allProdFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
		</div>
		<div style="clear:both;"></div>
		<table id="allProducts" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB">
			<thead>
				<tr>
					<th>Product ID</th>
					<th>Product Name</th>
					<th>Product Description</th>
					<th>Team Leader</th>
					<th>Start Date</th>
					<th>End Date</th>			
				</tr>		
			</thead>
			
			<tbody>
				<%
				for(int i=0; i<products.size(); i++){
					p = (Product)products.get(i);
				%>
				<tr>
					<td style="width:auto; text-align:center"><%=p.getId()%></td>
					<td style="width:20%;"><a href="/proddev/controller?manager=productManager&method=1&productId=<%=p.getId()%>"><%=p.getName()%></a></td>
					<td style="width:33%"><%=p.getDescription()%></td>
					<td style="width:15%"><%=p.getLeader()%></td>
					<td style="width:12%"><%=p.getStartDate()%></td>
					<td style="width:12%"><%=p.getEndDate()%></td>
				
				</tr>
				
				<%} %>
			</tbody>
		</table>
		<div id="allProdPager" class="pager" style="float:right; margin-top:-10px">
			<form>
				<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
				<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
				<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
				<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
				<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
				<select class="pagesize" style="height:20px;">
					<option SELECTED value="5">set paging</option>
					<option value="5">5 per page</option>
					<option value="10">10 per page</option>
					<option value="20">20 per page</option>
					<option value="30">30 per page</option>					
				</select>
			</form>
		</div>	
		<div style="clear:both"></div>
	</div>
</div>